<template>
    <div id="leaflet">
        <div class="child-map">
            <l-map v-bind="mapOptions(TianDituData.projs.球面墨卡托投影)">
                <t-layer-control position="topright"/>
                <l-layer-group v-for="item of TianDituData.layers" :key="item.name"
                               :layerType="item.layerType" :name="item.name">
                    <tianditu-layer v-for="layer of item.layers" :z-index="layer.zIndex" :key="layer.name"
                                    :layer="layer.layer"
                                    :tile-matrix-set="TianDituData.matrixSets.球面墨卡托投影"
                                    :tk="tk"
                                 />
                </l-layer-group>
            </l-map>
            <l-map v-bind="mapOptions(TianDituData.projs.经纬度投影)">
                <t-layer-control position="topright"/>
                <l-layer-group v-for="item of TianDituData.layers" :key="item.name"
                               :layerType="item.layerType" :name="item.name">
                    <l-tile-layer v-for="layer of item.layers" :z-index="layer.zIndex" :key="layer.name"
                                  :url="tileLayerUrl(layer.layer,TianDituData.matrixSets.经纬度投影,tk)"></l-tile-layer>
                </l-layer-group>
            </l-map>
        </div>
        <div class="child-map">
            <l-map v-bind="mapOptions(TianDituData.projs.球面墨卡托投影)">
                <t-layer-control position="topright"/>
                <l-layer-group v-for="item of TianDituData.layers" :key="item.name"
                               :layerType="item.layerType" :name="item.name">
                    <tianditu-wmts-layer v-for="layer of item.layers" :z-index="layer.zIndex" :key="layer.name"
                                         :tile-matrix-set="TianDituData.matrixSets.球面墨卡托投影" :tk="tk"
                                         :layer="layer.layer"></tianditu-wmts-layer>
                </l-layer-group>
            </l-map>
            <l-map v-bind="mapOptions(TianDituData.projs.经纬度投影)">
                <t-layer-control position="topright"/>
                <l-layer-group v-for="item of TianDituData.layers" :key="item.name"
                               :layerType="item.layerType" :name="item.name">
                    <tianditu-wmts-layer v-for="layer of item.layers" :z-index="layer.zIndex" :key="layer.name"
                                         :tile-matrix-set="TianDituData.matrixSets.经纬度投影" :tk="tk"
                                         :layer="layer.layer"></tianditu-wmts-layer>
                </l-layer-group>

            </l-map>
        </div>

    </div>
</template>

<script>
    import 'leaflet/dist/leaflet.css'
    import {CRS} from 'leaflet'
    import {LLayerGroup, LMap, LTileLayer} from "vue2-leaflet";
    import {TianDituData, TiandituWmtsLayer, TLayerControl} from "../../packages";
    import TiandituLayer from "../../packages/layer/TiandituLayer";


    export default {
        name: "LeafletMap",
        components: {
            TiandituLayer,
            TLayerControl,
            TiandituWmtsLayer,
            LTileLayer,
            LMap,
            LLayerGroup
        },
        data() {
            return {
                tk: 'f0bda4f9a8dde4b3eca4cba75e9744c0',
                TianDituData
            }
        },
        methods: {
            tileLayerUrl(layer, tileMatrixSet, tk) {
                return `http://t0.tianditu.gov.cn/DataServer?T=${layer}_${tileMatrixSet}&X={x}&Y={y}&L={z}&tk=${tk}`
            },
            mapOptions(crsName) {
                return {
                    center: [26.78, 108.14],
                    zoom: 10,
                    crs: CRS[crsName],
                    continuousWorld: true

                }
            }
        },
        created() {


        }
    }
</script>

<style scoped>
    #leaflet {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #leaflet .child-map {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        width: 100%;
    }

</style>
